@import "base";


body {
	background-image: url(bg.jpg);
}

#wrapper {
	width:1024px;
	height:600px;
	margin:0 auto;
	padding:50px;
}

.node-wrapper {
	max-width:180px;
	max-height:46px;
	background-color:$node-wrapperbg;
	@include border-radius($node-radius);
	padding:$node-padding;
	position:relative;
	z-index:1;

}

.node-content-wrapper {
	max-width:180px;
	height:46px;
	background-color:#fff;
	text-align: center;
	line-height: 46px;
	font-family: arial;
	font-weight: bold;
	font-size: 18px;
}

.node-dept-wrapper {
	height:50%;
	width:100%;
	background-color:$node-wrapperbg;
	text-align: center;
	font-family: arial;
	font-size: 15px;
	font-weight: bold;
	color:#ffffff;
	line-height:23px;
}

.node-name-wrapper {
	height:50%;
	width:100%;
	text-align: center;
	font-family: arial;
	font-size: 13px;
	color:#222222;
	line-height:23px;
}

.node-firstoption-wrapper {
	max-width:180px;	
	//@include clearfix;
	position:relative;
}

.node-holder-avatar-wrapper {
	width:44px;
	height:44px;
	padding:3px;
	background-color:$node-wrapperbg;
	margin:0 auto;
	@extend .radius-3;
}

.node-avatar-wrapper {
	width:40px;
	height:40px;
	background-color:#fff;
	@include border-radius($node-radius);
	padding:2px;
}

.node-settings-wrapper {
	width:60px;
	height:20px;
	background-color:#dfdfdf;
	@extend .radius-3;
	border: 1px solid #969696;
	border-bottom:none;
	position:absolute;
	right:0px;
	bottom:-21px;
	opacity:0;
}

.node-dragtopoint-wrapper {
	width: 144px;
	height:22px;
	background-color:#dfdfdf;
	border: 1px solid #969696;
	border-top:none;
	@include float-right;
	@extend .radius-3-bottom;
	padding: 2px 11px;
	top: -28px;
	position: relative;
	opacity:0;
	
}

span.dragtext {
	font-family: arial;
	font-size: 13px;
	color: red;
	text-align:center;
}

span.dragtext:before {
	content: url('../dragiconsmall.png');
	height:15px;
	width:16px;
	position:relative;
	top:3px;
}

.node-drag-wrapper {
	width: 225px;
	height:auto;
	border: dotted 3px #cccccc;
	//padding: 15px;
	position:relative;
	border-color:transparent;
	padding-top:15px;
	padding-bottom:40px;
}

.add-padding-node-workflow {
	padding-top:35px;
}

.node-drag-holder {
	margin:0 auto;
	width: 187px;
}

.node-drag-item-wrapper {
	width: 177px;
	height: 27px;
	border: dotted 3px #cccccc;
	border-bottom:none;
	position: absolute;
	top: -53px;
	margin: 0 auto;
	left: 11px;
	padding:10px;
	border-color:transparent;
}

span.node-drag-text-wrapper {
	font-family: arial;
	font-size: 15px;
	color:#f00;
	display:none;
}

span.node-drag-text-wrapper:before {
	content: url('../dragiconbig.png');
	width:20px;
	height:20px;
	position: relative;
	top: 5px;
}

/*for workflow only */

.node-workflow-icon-wrapper {
height: 30px;
width: 30px;
background-color: #0072ff;
border: 2px solid #343434;
position: relative;
top: -41px;
left: -16px;
@include border-radius($node-radius);
}


/*for workflow circle node only */

.node-circle-wrapper {
	height: 120px;
	width: 120px;
	background-color: #ffffff;
	border-radius: 100%;
	border: 3px solid #343434;
	margin:0 auto;
}

.node-circle-title {
	background-color: #343434;
	padding: 5px;
	text-align: center;
	font-family: arial;
	font-size: 18px;
	color: #ffffff;
	margin-top: 47px;
}

.node-circle {
	border-radius:30px;
	background-color:#ffffff;
	width:40px;
	height:40px;
	top:-36px;
}


.node-dragtopoint-wrapper {
border-top:1px solid #969696;
 @extend .radius-3

 }

.node-circle-settings-wrapper {
	width:60px;
	height:20px;
	background-color:#dfdfdf;
	@extend .radius-3;
	border: 1px solid #969696;
	border-bottom:none;
	position:absolute;
	right:0px;
	bottom:-21px;
	opacity:0;
}

.node-circle-dragtopoint-wrapper {
	width: 144px;
	height:22px;
	background-color:#dfdfdf;
	border: 1px solid #969696;
	border-top:none;
	@include float-right;
	@extend .radius-3-bottom;
	padding: 2px 11px;
	top: -28px;
	position: relative;
	opacity:0;
	
}
.border-circle-node-top {
	border-top:1px solid #969696;
	@extend .radius-3;
}

.border-circle-node {
	border-bottom:1px solid #969696;
	@extend .radius-bottom;

}

